<template>
    <div className="centreLeft1">
        <div className="bg-color-black">
            <div className="d-flex pt-2 pl-2">
        <span>
          <icon className="iconfont icon-layer-group"></icon>
        </span>
                <div className="d-flex">
                    <span className="fs-xl text mx-2">地图数据</span>
                    <dv-decoration-1 className="dv-dec-1"/>
                </div>
            </div>

            <div className="up">
                <div>
                    <div style="padding-bottom: 10px">
                        <div style="text-align: center">
                            <span className="itentitle txtlc">{{ titleItem[0].value }}</span>
                        </div>
                        <div style="text-align: center">
                            <span className="colorBlue fw-b txtlc">订单总数</span>
                        </div>

                    </div>
                    <div style="text-align: center">
                        <div style="text-align: center">
                            <span className="itentitle txtlc">{{ Item[0].value }}</span>
                        </div>
                        <div style="text-align: center">
                            <span className="colorBlue fw-b txtlc">今日订单</span>
                        </div>


                    </div>
                </div>
                <div style="text-align: center">
                    <div style="padding-bottom: 10px">
                        <div style="text-align: center">
                            <span className="itentitle">{{ titleItem1[0].value }}</span>
                        </div>
                        <div style="text-align: center">
                            <span className="colorBlue fw-b txtlc">无牌订单总数</span>
                        </div>
                    </div>
                    <div>
                        <div style="text-align: center">
                            <span className="itentitle">{{ Item1[0].value }}</span>
                        </div>
                        <div style="text-align: center">
                            <span className="colorBlue fw-b txtlc">今日无牌总数</span>
                        </div>


                    </div>
                </div>
                <div>
                    <div style="padding-bottom: 10px">
                        <div style="text-align: center">
                            <span className="itentitle">{{ titleItem2[0].value }}</span>
                        </div>
                        <div style="text-align: center">
                            <span className="colorBlue fw-b txtlc">用户总数</span>
                        </div>


                    </div>
                    <div>
                        <div style="text-align: center">
                            <span className="itentitle" style="text-align: center;">{{ Item2[0].value }}</span>
                        </div>
                        <div style="text-align: center">
                            <span className=" colorBlue fw-b txtlc">今日新增用户</span>
                        </div>

                    </div>
                </div>
                <div>
                    <div style="padding-bottom: 10px">
                        <div style="text-align: center">
                            <span className="itentitle">{{ titleItem3[0].value }}</span>
                        </div>
                        <div style="text-align: center">
                            <span className="colorBlue fw-b txtlc">车辆总数</span>
                        </div>


                    </div>
                    <div>
                        <div style="text-align: center">
                            <span className="itentitle">{{ Item3[0].value }}</span>
                        </div>
                        <div style="text-align: center">
                            <span className="colorBlue fw-b txtlc">今日新增车辆</span>
                        </div>

                    </div>
                </div>

            </div>

            <div className="d-flex jc-center">
                <CesiumContainer></CesiumContainer>
            </div>
        </div>
    </div>
</template>

<script>

    import CesiumContainer from '../earth'
    //import {parkSum} from "@/api/api";
    import axios from "axios";

    export default {
        components: {
            // Chart
            CesiumContainer
        },

        mounted() {

            axios.get(this.$route.params.url + 'dataView/revenue/orderTotal').then(res => {
                this.titleItem = res.data;
            }).catch(function (res) {
                console.log(res);
            });
            axios.get(this.$route.params.url + 'dataView//order/noPlate').then(res => {
                this.titleItem1 = res.data;
            }).catch(function (res) {
                console.log(res);
            });
            axios.get(this.$route.params.url + 'dataView/user/registered').then(res => {
                this.titleItem2 = res.data;
            }).catch(function (res) {
                console.log(res);
            });
            axios.get(this.$route.params.url + 'dataView/car/bind').then(res => {
                this.titleItem3 = res.data;
            }).catch(function (res) {
                console.log(res);
            });
            axios.get(this.$route.params.url + 'dataView/revenue/orderTotalToday').then(res => {
                this.Item = res.data;
            }).catch(function (res) {
                console.log(res);
            });
            axios.get(this.$route.params.url + 'dataView//order/noPlateToday').then(res => {
                this.Item1 = res.data;
            }).catch(function (res) {
                console.log(res);
            });
            axios.get(this.$route.params.url + 'dataView/user/addedUsersToday').then(res => {
                this.Item2 = res.data;
            }).catch(function (res) {
                console.log(res);
            });
            axios.get(this.$route.params.url + 'dataView/car/addedCarToday').then(res => {
                this.Item3 = res.data;
                console.log('item3' + res.data)
            }).catch(function (res) {
                console.log(res);
            });

        },
        methods: {},

// 销毁监听事件

        data() {
            return {
                cardlist: ['订单总数', '无牌订单总数', '用户总数', '车辆总数'],
                titleItem: [
                    {
                        name: "",
                        value: "",
                    },
                ],
                titleItem1: [
                    {
                        name: "",
                        value: "",
                    },
                ],
                titleItem2: [
                    {
                        name: "",
                        value: "",
                    },
                ],
                titleItem3: [
                    {
                        name: "",
                        value: "",
                    },
                ],
                Item: [
                    {
                        name: "",
                        value: "",
                    },
                ],
                Item1: [
                    {
                        name: "",
                        value: "",
                    },
                ],
                Item2: [
                    {
                        name: "",
                        value: "",
                    },
                ],
                Item3: [
                    {
                        name: "",
                        value: "",
                    },
                ],
                viewer: {},
            };
        },
    };
</script>

<style lang="scss" scoped>
  .centreLeft1 {
    $box-width: 300px;
    $box-height: 410px;
    padding: 16px;
    height: $box-height;
    min-width: $box-width;
    border-radius: 5px;

    .bg-color-black {
      height: $box-height - 30px;
      border-radius: 10px;
    }

    .text {
      color: #c3cbde;
    }

    .dv-dec-1 {
      position: relative;
      width: 100px;
      height: 20px;
      top: -3px;
    }

    .chart-box {
      margin-top: 16px;
      width: 170px;
      height: 170px;

      .active-ring-name {
        padding-top: 10px;
      }
    }

    .up {
      width: 100%;
      display: flex;
      height: 25%;
      //flex-wrap: wrap;
      padding: 0;
      justify-content: space-around;
      //.item {
      //  border-radius: 6px;
      //  padding-top: 8px;
      //  margin-top: 8px;
      //  width: 32%;
      //  height: 50px;
      //  .dv-dig-flop {
      //    width: 150px;
      //    height: 30px;
      //  }
      //}
    }
  }

  .txtlc {
    text-align: center;
  }

  .itentitle {

    text-align: center;
    color: #40E0D0;
    text-align: center;
    vertical-align: center;
    font-size: 24px;
  }

  .jc-center {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 999;
    //width: 800px;
    //height: 450px;
    // background: #ff8080;
    .map-box {
      width: 100%;
      //height: 450px;
      // background: green;
      #cesiumContainer {
        //width: 770px;
        width: 100%;
        height: 100%
        // background: #c3cbde;
        //padding-bottom: 350px;
        // padding-left: 100px;
      }
    }
  }

  .bottom-data {
    .item-box {
      & > div {
        padding-right: 5px;
      }

      font-size: 14px;
      float: right;
      position: relative;
      width: 50%;
      color: #d3d6dd;

      .dv-digital-flop {
        width: 120px;
        height: 30px;
      }

      i {
        font-size: 20px;
        line-height: 30px;
        margin-left: 20px;
      }

      .colorYellow {
        color: yellowgreen;
      }

      p {
        text-align: center;
      }
    }
  }

</style>
